<template>
    <div class="search-list-item-info">
        <!-- 标签  -->
        <div class="tags">
            <template v-for="(item, index) in itemData.houseTags">
                <van-tag :color="item.background.color" :text-color="item.color">{{ item.text }}</van-tag>
            </template>
        </div>
        <!-- 价格 -->
        <div class="price">
            <span class="real-price">{{ itemData.finalPrice }}</span>
            <span class="old-price">¥{{ itemData.productPrice }}</span>
            <van-tag v-if="itemData.priceTipBadge" round :text-color="itemData.priceTipBadge.color"
                color="rgb(251, 74, 74)">
                <span class="icon-unit-sound">
                    <van-icon name="volume" size="12" />
                </span>
                {{ itemData.priceTipBadge.text }}
            </van-tag>
        </div>
        <!--  -->
        <div v-if="itemData.promoContent" class="footer">
            <van-tag round color="transparent" text-color="#f66">{{ itemData.promoContent }}</van-tag>
        </div>
    </div>
</template>


<script setup>
const props = defineProps({
    itemData: {
        type: Object,
        default: () => { },
    }
})

</script>


<style lang="less" scoped>
.search-list-item-info {
    margin-top: 7px;

    .tags :deep(.van-tag) {
        margin-right: 6px;
    }

    .price {
        // display: flex;
        // align-items: center;
        margin-top: 3px;
        margin-bottom: 7px;

        .real-price {
            position: relative;
            top: 1px;
            color: #ff9645;
            font-size: 20px;
            padding-right: 10px;
            padding-left: 1px;

            &::before {
                content: "¥";
                bottom: 0;
                font-size: 14px;
                padding-right: 3px;
            }
        }

        .old-price {
            font-weight: 500;
            color: #999;
            font-size: 12px;
            text-decoration: line-through;
            padding-right: 5px;
        }

        .icon-unit-sound {
            margin-right: 3px;
        }
    }
}
</style>